<template>
	<view class="statistiquePage">
		<view class="tabVue flex padding-row30">
			<view class="tab" :class="{active: tab===index}" v-for="(item, index) in tabs" :key="index" @click="change(index)">{{ item.label }}</view>
			<view class="tab" @click="change(5)">自定义时间</view>
		</view>
		<view style="height: 80rpx;"></view>
		<view class="dataVue flex">
			<view class="data flex-column">
				<text style="font-size: 52rpx; font-weight: 600; line-height: 1; color: #fff;">{{ info.orderCount }}</text>
				<view style="height: 30rpx;"></view>
				<text style="font-size: 30rpx; line-height: 1; color: #fff;">订单数量</text>
			</view>
			<view class="data flex-column">
				<text style="font-size: 52rpx; font-weight: 600; line-height: 1; color: #fff;">{{ info.salesCount }}</text>
				<view style="height: 30rpx;"></view>
				<text style="font-size: 30rpx;line-height: 1; color: #fff;">销售数量</text>
			</view>
			<view class="data flex-column">
				<text style="font-size: 52rpx; font-weight: 600; line-height: 1; color: #fff;">{{ info.orderPrice }}</text>
				<view style="height: 30rpx;"></view>
				<text style="font-size: 30rpx; line-height: 1; color: #fff;">销售总额</text>
			</view>
			<view class="data flex-column">
				<text style="font-size: 52rpx; font-weight: 600; line-height: 1; color: #fff;">{{ info.refundAmount }}</text>
				<view style="height: 30rpx;"></view>
				<text style="font-size: 30rpx;  line-height: 1; color: #fff;">退款金额</text>
			</view>
			<view class="data flex-column">
				<text style="font-size: 52rpx; font-weight: 600; line-height: 1; color: #fff;">{{ info.incomeAmount }}</text>
				<view style="height: 30rpx;"></view>
				<text style="font-size: 30rpx; line-height: 1; color: #fff;">收入金额</text>
			</view>
		</view>
		<!-- 营业趋势 -->
		<view class="label padding30">营业趋势</view>
		<view class="chatVue">
			<qiun-data-charts type="mix" :opts="opts" :chartData="chartData" :ontouch="true"/>
		</view>
		
		
		
		<!-- 交易数据 -->
		<view class="label padding30">交易数据</view>
		<view class="tableue">
			<view class="thVue flex padding-row30">
				<view class="th">用户</view>
				<view class="th">业务类型</view>
				<view class="th">关联单号</view>
				<view class="th">交易金额</view>
				<view class="th">时间</view>
			</view>
			<view class="tdVue flex padding-row30" v-for="(item, index) in list" :key="index">
				<view class="td">{{ item.userName }}</view>
				<view class="td">{{ item.bizType }}</view>
				<view class="td">{{ item.orderNo }}</view>
				<view class="td" :style="{color: Number(item.amount)>0 ? '#FB6260' : '#58A3F7'}">{{ item.amount }}</view>
				<view class="td">{{ item.time }}</view>
			</view>
		</view>
		
		<view class="pageVue flex-center align-center margin40">
			<view class="pred" :class="{active: page==1}" @click="opFun(0)">上一页</view>
			<view class="box">{{page}}/{{totalPage}}</view>
			<view class="next" :class="{active: isListPage}" @click="opFun(1)">下一页</view>
		</view>
		
	<!-- 	
		<view class="content flex margin40">
			<view class="contentLi w50">
				<view class="label padding30">付款统计</view>
				<view class="c">
					<qiun-data-charts type="ring" :opts="opts1" :chartData="chartData1"/>
				</view>
			</view>
			<view class="contentLi w50">
				<view class="label padding30">分类统计</view>
				<view class="inner">
					<qiun-data-charts type="pie" :opts="opts2" :chartData="chartData2"/>
				</view>
			</view>
		</view> -->

		<l-calendar v-model="show" @change="changeDate" :isRange="true"></l-calendar>
	</view>
</template>

<script>
	import { getDataKline, getBasicInfo, getOrderList } from "@/api/index.js"
	export default {
		data() {
			return {
				show: false,
				tabs: [{ label: "今天"}, {label: "昨天"}, {label: "近7天"}, {label: "近30天"}],
				tab: 0,
				page: 1,
				limit: 5,
				totalPage: 0,
				list: [],
				isListPage: false,
				info: {},
				startDate: "",
				endDate: "",
				itemCount: 0,
				chartData: {},
				chartData1: {},
				chartData2: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['column'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE"],
					padding: [15, 15, 0, 15],
					legend: {},
					dataLabel: true,  //是否显示数据
					enableScroll: true,  //X轴滑动
					xAxis: {
						disableGrid: true,
						fontSize: 10,
						scrollShow: true,
						itemCount: 14,
						scrollColor: "#F5F5F5",
						scrollBackgroundColor: "#F5F5F5"
					},
					yAxis: {
						disabled: false,
						disableGrid: false,
						splitNumber: 5,
						gridType: "dash",
						dashLength: 4,
						gridColor: "#CCCCCC",
						padding: 0,
						showTitle: true,
						data: [{
								position: "left",
								min: 0,
								fontSize: 10,
								title: "定单量/销售量",
								textAlign: "left",
								titleFontSize: 10,
							},
							{
								position: "right",
								min: 0,
								fontSize: 10,
								title: "销售金额",
								textAlign: "left", 
								titleFontSize: 10,
							},
						]
					},
					extra: {
						mix: {
							column: {
								width: 20,
								seriesGap: 10,
							}
						}
					}
				},
				// opts1: {
				// 	rotate: false,
				// 	rotateLock: false,
				// 	color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
				// 	padding: [5,5,5,5],
				// 	dataLabel: true,
				// 	enableScroll: false,
				// 	legend: {
				// 		show: true,
				// 		position: "right",
				// 		lineHeight: 25
				// 	},
				// 	title: {
				// 		name: "总计",
				// 		fontSize: 15,
				// 		color: "#666666"
				// 	},
				// 	subtitle: {
				// 		name: "9",
				// 		fontSize: 25,
				// 		color: "#7cb5ec"
				// 	},
				// 	extra: {
				// 		ring: {
				// 			ringWidth: 60,
				// 			activeOpacity: 0.5,
				// 			activeRadius: 10,
				// 			offsetAngle: 0,
				// 			labelWidth: 15,
				// 			border: false,
				// 			borderWidth: 3,
				// 			borderColor: "#FFFFFF"
				// 		}
				// 	}
				// },
				// opts2: {
				//     color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
				//     padding: [5,5,5,5],
				//     enableScroll: false,
				//     extra: {
				//         pie: {
				//             activeOpacity: 0.5,
				//             activeRadius: 10,
				//             offsetAngle: 0,
				//             labelWidth: 15,
				//             border: false,
				//             borderWidth: 3,
				//             borderColor: "#FFFFFF"
				//         }
				//     }
				// }
			}
		},
		onLoad() {
			let today = new Date();
			let year = today.getFullYear();
			let month = today.getMonth() + 1; // 月份从0开始，所以要加1
			let day = today.getDate();
			this.startDate = `${year}-${month}-${day}`
			this.endDate = `${year}-${month}-${day}`
		},
	
		onReady() {
			this.getBasic()
			this.getServerData();
			this.getList()
		},
		
		methods: {
			changeDate(e){
				let start = new Date(e.startDate).getTime()
				let end = new Date(e.endDate).getTime()
				let number = 24 * 60 * 30 * 30 * 1000
				if(end-start>number) {
					uni.showToast({
						title: "时间间隔最多30天",
						icon: "none"
					})
					return
				}
				this.startDate = e.startDate
				this.endDate = e.endDate
				this.getBasic()
				this.getServerData();
			},
			
			change(index) {
				if(this.tab==index && index<5) return
				this.tab = index
				if(index===0) {
					let today = new Date();
					let year = today.getFullYear();
					let month = today.getMonth() + 1; // 月份从0开始，所以要加1
					let day = today.getDate();
					this.startDate = `${year}-${month}-${day}`
					this.endDate = `${year}-${month}-${day}`
					// this.opts.enableScroll = false
					// this.opts.xAxis.scrollShow = false
					this.getBasic()
					this.getServerData();
				}else if(index===1) {
					let today = new Date(); // 获取今天的日期
					let yesterday = new Date(today); // 通过复制今天的日期创建一个新的日期对象
					yesterday.setDate(today.getDate() - 1); // 将新日期对象的日期减去一天
					let year = yesterday.getFullYear(); // 获取年份
					let month = yesterday.getMonth() + 1; // 获取月份（注意月份是从0开始计数的，因此要加1）
					let day = yesterday.getDate(); // 获取日期
					this.startDate = `${year}-${month}-${day}`
					this.endDate = `${year}-${month}-${day}`
					// this.opts.enableScroll = false
					// this.opts.xAxis.scrollShow = false
					this.getBasic()
					this.getServerData();
				}else if(index===2) {
					let today = new Date(); // 获取今天的日期
					let year_1 = today.getFullYear();
					let month_1 = today.getMonth() + 1; // 月份从0开始，所以要加1
					let day_1 = today.getDate();
					let date = new Date(today);
					date.setDate(today.getDate() + 7);
					let year_2 = date.getFullYear(); // 获取年份
					let month_2 = date.getMonth() + 1; // 获取月份（注意月份是从0开始计数的，因此要加1）
					let day_2 = date.getDate(); // 获取日期
					this.startDate = `${year_1}-${month_1}-${day_1}`
					this.endDate = `${year_2}-${month_2}-${day_2}`
					// this.opts.enableScroll = true
					// this.opts.xAxis.scrollShow = true
					this.getBasic()
					this.getServerData();
				}else if(index===3) {
					let today = new Date(); // 获取今天的日期
					let year_1 = today.getFullYear();
					let month_1 = today.getMonth() + 1; // 月份从0开始，所以要加1
					let day_1 = today.getDate();
					let date = new Date(today);
					date.setDate(today.getDate() + 30);
					let year_2 = date.getFullYear(); // 获取年份
					let month_2 = date.getMonth() + 1; // 获取月份（注意月份是从0开始计数的，因此要加1）
					let day_2 = date.getDate(); // 获取日期
					this.startDate = `${year_1}-${month_1}-${day_1}`
					this.endDate = `${year_2}-${month_2}-${day_2}`
					// this.opts.enableScroll = true
					// this.opts.xAxis.scrollShow = true
					this.getBasic()
					this.getServerData();
				}else{
					this.show = true
				}
			},
			
			opFun(type){
				if(this.page==1 && type==0) return
				if(this.isListPage && type==1) return
				if(type===0) {
					this.page--
					this.getList()
				}
				if(type==1) {
					this.page++
					this.getList()
				}
			},
			
			// 获取基本信息
			getBasic(){
				getBasicInfo({
					startTime: this.startDate,
					endTime: this.endDate,
				}).then(res=>{
					console.log(res)
					this.info = res.data
				})
			},
			
			getList(){
				getOrderList({
					page: this.page,
					limit: this.limit,
					startTime: this.startDate,
					endTime: this.endDate,
				}).then(res=>{
					this.list = res.data.list
					this.isListPage = res.data.totalPage==this.page
					this.totalPage = res.data.totalPage
				})
			},
			// 获取柱形数据
			getServerData() {
				getDataKline({
					startTime: this.startDate,
					endTime: this.endDate,
				}).then(res=>{
					console.log(this.opts)
					setTimeout(()=>{
						let obj = {
							categories: res.data.title,
							series: [
								{
									name: "订单量",
									index: 1,
									type: "column",
									data: res.data.orderCount 
								},
								{
									name: "销售量",
									index: 1,
									type: "column",
									data: res.data.salesCount
								},
								{
									name: "销售金额",
									type: "line",
									style: "curve",
									color: "#2fc25b",
									data: res.data.orderPrice
								},
							]
						}
						console.log("柱形折线图", obj)
						this.chartData = JSON.parse(JSON.stringify(obj));
						
						// 付款统计
						// let obj1 = {
						//     series: [
						//         {
						//             data: [{"name":"一班","value":50},{"name":"二班","value":30},{"name":"三班","value":20}]
						//         }
						//     ]
						// };
						// this.chartData1 = JSON.parse(JSON.stringify(obj1));
						
						
						// 分类统计
						// let obj2 = {
						//     series: [
						//         {
						//             data: [{"name":"一班","value":50},{"name":"二班","value":30},{"name":"三班","value":20},{"name":"四班","value":18},{"name":"五班","value":8}]
						//         }
						//     ]
						// };
						// this.chartData2 = JSON.parse(JSON.stringify(obj2));
					},500)
					
				})
			},
		}
	}
</script>

<style lang="less">
	.tabVue {
		width: 100%;
		height: 80rpx;
		background: #fff;
		position: fixed;
		z-index: 999;
		left: 0;
		top: 0;

		.tab {
			width: 20%;
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			color: #333;
		}

		.active {
			color: #5B8FF9;
			font-weight: 600;
		}
	}

	.dataVue {
		width: 100%;
		padding: 30rpx;

		.data {
			width: 20%;
			padding: 30rpx;
			margin: 0 15rpx;
			border-radius: 15rpx;
		}

		.data:nth-child(1) {
			background: #58A3F7;
		}

		.data:nth-child(2) {
			background: #52C1F5;
		}

		.data:nth-child(3) {
			background: #FEC03D;
		}

		.data:nth-child(4) {
			background: #FB6260;
		}

		.data:nth-child(5) {
			background: #8167F5;
		}
	}

	.label {
		font-weight: 600;
		font-size: 30rpx;
	}

	.chatVue {
		min-width: 100%;
		padding: 0 100rpx 0 30rpx;
	}
	
	.tableue {
		width: 100%;
		.thVue {
			width: 100%;
			height: 100rpx;
			.th {
				width: 20%;
				line-height: 100rpx;
				font-size: 32rpx;
				color: #222;
				font-weight: 600;
				border-bottom: 1rpx solid #ccc;
			}
		}
		.tdVue {
			width: 100%;
			height: 100rpx;
			.td {
				width: 20%;
				line-height: 100rpx;
				color: #666;
				border-bottom: 1rpx solid #ccc;
			}
		}
	} 

	.pageVue {
		width: 100%;
		height: 88rpx;
		.pred,.next {
			width: 200rpx;
			height: 88rpx;
			text-align: center;
			line-height: 88rpx;
			color: #5FC6FF;
			border: 1rpx solid #5FC6FF;
			border-radius: 16rpx;
		}
		.active {
			border: 1rpx solid #ccc;
			color: #ccc;
		}
		.box {
			width: 300rpx;
			height: 88rpx;
			text-align: center;
			line-height: 88rpx;
			color: #333;
			font-size: 30rpx;
		}
	}

	.inner {
		width: 100%;
		
	}
</style>